<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>套餐详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no,email=no" name="format-detection">
		<!--[if lt IE 9]> 
		<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper3.min.css" />
		<link rel="icon" href="../images/favicon.ico" />
		<script type="text/javascript" n src="../js/init.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<style type="text/css">
			/**{
				box-sizing: border-box;
			}*/
			
			a {
				text-decoration: none;
				color: #fff;
			}
			
			.swiper-container {
				width: 7.5rem;
			}
			
			.lb-img {
				width: 7.5rem;
			}
			
			.packageContainer1 {
				position: relative;
				height: 2.64rem;
				padding: 0.15rem 0;
				margin: 0 0.14rem;
				border-bottom: 0.1rem solid rgb(242, 242, 242);
			}
			
			.packageContainer1 button {
				position: absolute;
				right: 0.2rem;
				top: 1.4rem;
				background-color: #ae4b78;
				color: #fff;
				border: none;
				padding: 0.08rem 0.4rem;
				border-radius: 0.1rem;
			}
			
			.packageContainer1 h2 {
				font-size: 0.34rem;
			}
			
			.packageContainerPrice .left {
				padding-top: 0.1rem;
				color: #f00;
				line-height: 0.9rem;
				height: 0.9rem;
				font-size: 0.4rem;
			}
			.packageContainerPrice .right {
				padding-left: 0.2rem;
				color: #A1A1A1;
				font-size: 0.3rem;
				text-decoration: line-through;
			}
			.packageContainerPrice .bo {
				font-size: 0.24rem;
				color: #bbb;
			}
			.packageContainerArtical {
				height: 1rem;
				padding-top: 0.2rem;
				color: #a1a1a1;
				font-size: 0.22rem;
			}
			
			/*.packageContainer2 {
				text-indent: 1em;
				font-size: 0.3rem;
				line-height: 0.4rem;
				padding: 0.55rem 0;
				margin: 0 0.20rem;
				border-bottom: 0.1rem solid rgb(242, 242, 242);
				color: #333;
			}*/
			.packageContainer2 {
				padding: 0.3rem 0;
				margin: 0 0.20rem;
				border-bottom: 0.1rem solid rgb(242, 242, 242);
			}
			.packageContainer2 div {
				font-size: 0.4rem;
			}
			.packageContainer2 .left {
				font-size: 0.24rem;
				color: #f00;
				border: 1px solid #f00;
				border-radius: 2px;
				padding:0 0.2rem;
				margin: 0 0.2rem;
			}
			.packageContainer2 .right {
				font-size: 0.26rem;
			}
			.packageContainer2 .right span {
				color: #f00;
			}
			.packageContainer2 .more {
				font-size: 0.6rem;
			}
			.packageContainer2 .con {
				font-size: 0.24rem;
				border-bottom: 1px solid #ae4b78;
				margin: 0 0.2rem;
				color: #ae4b78;
			}
			.back {
				left: 0.20rem;
				font-size: 0.3rem;
			}
			
			.love {
				right: 0.84rem;
				font-size: 0.3rem;
			}
			
			.divide {
				font-size: 0.3rem;
				right: 0.24rem;
				line-height: 0.36rem;
			}
			
			.swiper-container {
				position: relative;
			}
			
			.swiper-container span {
				font-size: 0.4rem;
				position: absolute;
				z-index: 2;
				top: 0.36rem;
				color: #fff;
			}
			
			.swiper-container .back {
				left: 0.2rem;
			}
			
			.swiper-container .love {
				right: 0.8rem;
			}
			
			.swiper-container .provide {
				top: 0.26rem;
				right: 0.2rem;
			}
			/*==============================*/
			.contain {
				/*padding-bottom: 0.6rem;*/
			}
			.contain #btns {
				position: relative;
				height: 1.06rem;
				border-bottom: 0.1rem solid rgb(242, 242, 242);
				font-size: 0.3rem;
				margin: 0 0.20rem;
			}
			
			.contain #btns text {
				margin: 0 14%;
				font-size: 0.3rem;
				height: 1rem;
				line-height: 1rem;
				display: inline-block;
				width: 20%;
				text-align: center;
				position: absolute;
			}
			
			.contain #btns #left {
				left: 0rem;
			}
			
			.contain #btns #right {
				right: 0rem;
			}
			
			.color {
				color: #ae4b78;
				border-bottom: 0.06rem solid #ae4b78;
			}
			
			#divs .div div {
				text-indent: 1em;
				font-size: 0.24rem;
				line-height: 0.4rem;
				margin: 0 0.20rem;
				padding: 0.3rem 0;
			}
			
			#divs .div .class {
				border-bottom: 0.06rem solid rgb(242, 242, 242);
			}
			#divs .div .class::last-child {
				border: none;
			}
			#divs .div img {
				width: 100%;
				height: 4rem;
			}
			
			.div .class div.con {
				position: relative;
				margin: 0.3rem 0.20rem;
			}
			
			.div .class .con .left {
				position: absolute;
				width: 22%;
				top: 0.3rem;
				color: #999;
			}
			
			.div .class .con .right {
				display: inline-block;
				padding-left: 27%;
				width: 73%;
				text-indent: 0;
			}
			
			#divs .div .class .rightC {
				position: relative;
				padding: 0;
				margin: 0;
				text-indent: 0;
				right: 0rem;
				width: 73%;
				display: inline-block;
				padding-left: 27%;
			}
			
			.rightC text {
				vertical-align: top;
				display: inline-block;
				width: 0.6rem;
			}
			
			.btnConfirm {
				position: fixed;
				bottom: 0rem;
				left: 10%;
				text-align: center;
				width: 80%;
				font-size: 0.26rem;
				height: 0.6rem;
				line-height: 0.6rem;
				background-color: #a32e5a;
				color: #fff;
				border-radius: 0.1rem;
				/*opacity: 0.5;*/
			}
			#divs .div {
				font-size: 0.24rem;
			    line-height: 0.4rem;
			    margin: 0 0.20rem;
			    padding: 0.3rem 0;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var mySwiper = new Swiper('.swiper-container', {
					width: window.innerWidth,
					paginationClickable: true,
					loop: true,
					autoplay: 3000,
					autoplayDisableOnInteraction: false,
					// 如果需要分页器
					pagination: '.swiper-pagination'
				})
				/*window.onresize=function(){
					
					var imgPP = document.querySelectorAll('.lb-img')
					var swiperSlide = document.querySelectorAll('.swiper-slide');
					var W = document.body.clientWidth
					for(var i=0;i<imgPP.length;i++){
						imgPP[i].style.width=W+'px';
						swiperSlide[i].style.width=W+'px';
					}
				}*/

				var btns = document.getElementById("btns").getElementsByTagName("text");
				var divs = document.getElementById("divs").getElementsByClassName("div");
				for(var i = 0; i < btns.length; i++) {
					btns[i].index = i; //自定义属性，用于关联下面的大盒子
					btns[i].onclick = function() {

						for(var j = 0; j < btns.length; j++) {
							//把所有的button清空类名
							btns[j].className = "";
						}
						//点击的那个盒子添加指定类名
						this.className = "color";
						for(var i = 0; i < divs.length; i++) {
							//先让底下的div全部隐藏
							divs[i].style.display = "none";
						}
						//然后给当前所点击按钮相关联的盒子添加指定属性
						divs[this.index].style.display = "block";
					}
				}
			}
		</script>

	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img class="lb-img" src="../images/bwhb.jpg"></div>
				<div class="swiper-slide"><img class="lb-img" src="../images/drbf.jpg"></div>
				<div class="swiper-slide"><img class="lb-img" src="../images/lb51.jpg"></div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
			<span class="iconfont back"><a href="placeOrder.html">&#xe601;</a></span>
			<span class="iconfont love">&#xe602;</span>
			<span class="iconfont provide">&#xe6d2;</span>
		</div>
		<section class="packageContainer1">
			<h2>汉·韵复古风潮套餐汉·韵复古风潮套餐</h2>
			<h2>汉·韵复古风潮套餐</h2>
			<div class="packageContainerPrice"><text class="left">￥1999</text><text class="right">3888</text>
				<div class="bo">可先支付500元定金</div>
			</div>
			<button>联系我们</button>
			<!--<div class="packageContainerArtical">岁月更迭，时间推移，城市气质与日俱增，我们沦陷街角和光阴的梦游，在川流不息的车海...</div>-->
		</section>
		<section class="packageContainer2">
			<!--岁月更迭，时间推移，城市气质与日俱增，我们沦陷街角和光阴的梦游，在川流不息的车海...“婚礼青年”是一个可以快速便捷下单和收获婚礼信息的一个公众号，里面有三个板块，顺序依次是：婚礼下单、婚礼青年、胡美丽市集。-->
			<div class="top">
				<text class="left">订单礼</text><text class="right">在线下单即送婚礼青年大礼包</text>
			</div>
			<div class="bottom">
				<text class="left">全款礼</text>
				<text class="right">全款支付即享<span>-199元</span>大优惠</text>
			</div>
			<div class="more">
				<text class="con">想了解更多的婚礼信息？行内优秀婚庆公司推荐</text>
			</div>
		</section>

		<section class="contain">
			<div id="btns">
				<text class="color" id="left">图文详情</text>
				<text id="right">套餐内容</text>
			</div>
			<div id="divs">
				<div class="div" style="display: block;">
					<div>岁月更迭，时间推移，城市气质与日俱增，我们沦陷街角和光阴的梦游，在川流不息的车海...“婚礼青年”是一个可以快速便捷下单和收获婚礼信息的一个公众号，里面有三个板块，顺序依次是：婚礼下单、婚礼青年、胡美丽市集。</div>
					<img src="../images/bwhb.jpg" />
					<img src="../images/bwhb.jpg" />
					<img src="../images/bwhb.jpg" />
					<img src="../images/bwhb.jpg" />
					<img src="../images/bwhb.jpg" />
				</div>
				<div class="div" style="display: none;">
					<!--<div class="class">
						<div class="iconfont icon-wujiaoxing">造型</div>
						<div class="con">
							<text class="left">新娘服装</text>
							<text class="right">5套</text>
						</div>
						<div class="con">
							<text class="left">新郎服装</text>
							<text class="right">5套</text>
						</div>
						<div class="con">
							<text class="left">服装说明</text>
							<text class="right">提供男女服装各5套拍摄，全场服装任选吧，最多可自带服装1套/人，自带服装计入总数内</text>
						</div>
						<div class="con">
							<text class="left">造型说明</text>
							<text class="right">化妆造型：新娘彩妆造型设计（免费提供化妆品+定妆液+假睫毛+饰品），新郎整理彩妆造型（不含剪发）<br>造型用品：不免费提供隐形内衣<br>服务人员：摄影师1名+化妆师1名+拍摄助理1名</text>

						</div>

					</div>
					<div class="class">
						<div class="iconfont icon-wujiaoxing">场景</div>
						<div class="con">
							<text class="left">拍摄场景</text>
							<text class="right">纯外景</text>
						</div>
						<div class="con">
							<text class="left">外景数量</text>
							<text class="right">8个以上</text>
						</div>
						<div class="con">
							<text class="left">外景说明</text>
							<text class="right">外景拍摄不产生用餐费用，所产生车费、景点门票费用由商家承担</text>
						</div>
					</div>
					<div class="class">
						<div class="iconfont icon-wujiaoxing">拍摄</div>
						<div class="con">
							<text class="left">拍摄天数</text>
							<text class="right">1天</text>
						</div>
						<div class="con">
							<text class="left">拍摄张数</text>
							<text class="right">220张</text>
						</div>
						<div class="con">
							<text class="left">精修张数</text>
							<text class="right">68张</text>
						</div>
						<div class="con">
							<text class="left">入册张数</text>
							<text class="right">68张</text>
						</div>
					</div>
					<div class="class">
						<div class="iconfont icon-wujiaoxing">成品</div>
						<div class="con">
							<text class="left">相册数量</text>
							<text class="right">4本</text>
						</div>
						<div class="con">
							<text class="left">相册说明</text>
							<text class="right">20寸一体成型韩国双面冰雕琉璃水晶相册1本 12寸一体成型韩国双面冰雕琉璃水晶相册1本 10寸一体成型韩国双面冰雕琉璃水晶相册1本 8寸一体成型时尚OY瑞丽杂志册相册1本 </text>
						</div>
						<div class="con">
							<text class="left">相框数量</text>
							<text class="right">2个</text>
						</div>
						<div class="con">
							<text class="left">相框说明</text>
							<text class="right">40寸高档欧式罗马艺术相框1幅 40寸精美放大片1张 30寸高档韩式满天星艺术相框1幅 30寸精美放大片1张 精美摆台4个：12寸奥斯卡冰雕水晶摆台1幅 10寸韩式10寸拉米娜摆台1幅 8寸奥斯卡冰雕水晶摆台1幅 7寸奥斯卡冰雕摆台1幅（到店礼！）后期产品邮寄费用客户自理</text>
						</div>
					</div>
					<div class="class">
						<div class="iconfont icon-wujiaoxing">团队</div>
						<div class="con">
							<text class="left">摄影师</text>
							<text class="right">资深</text>
						</div>
						<div class="con">
							<text class="left">化妆师</text>
							<text class="right">资深</text>
						</div>
						<div class="con">
							<text class="left">灯光师</text>
							<text class="right">无</text>
						</div>
						<div class="con">
							<text class="left">化妆助理</text>
							<text class="right">有</text>
						</div>
						<div class="con">
							<text class="left">微电影拍摄</text>
							<text class="right">无</text>
						</div>
					</div>
					<div class="class">
						<div class="iconfont icon-wujiaoxing">补充说明</div>
						<div class="con">
							<text class="left">购买须知</text>
							<text class="right">需提前5天预约，因婚礼服务需预留档期，预定后取消将造成商家的经济损失。若要取消，申请退款时将扣除订单总金额的30作为违约金；若与商家协商一致，商家同意后可全额退款。如遇特殊情况，用户跟商家协商一致，可酌情处理。</text>
						</div>
						<div class="con">
							<text class="left">套餐赠品</text>
							<text class="right">新娘时尚钱包照1张 新郎时尚钱包照1张 让您在婚礼上震撼全场的《幸福电子相册》1份 3D电子微请帖1份</text>
						</div>
						<div class="con">
							<text class="left">套餐亮点</text>
							<div class="rightC">
								<text>不满意重拍</text>
								<text>底片全送</text>
								<text>全程无隐形消费</text>
								<text>极速出精修</text>
								<text>七天选片</text>
								<text>全程一对一服务</text>
							</div>
						</div>
					</div>-->
					<text id="conTain">需提前5天预约，因婚礼服务需预留档期，预定后取消将造成商家的经济损失。若要取消，申请退款时将扣除订单总金额的30作为违约金；若与商家协商一致，商家同意后可全额退款。如遇特殊情况，用户跟商家协商一致，可酌情处理。需提前5天预约，因婚礼服务需预留档期，预定后取消将造成商家的经济损失。若要取消，申请退款时将扣除订单总金额的30作为违约金；若与商家协商一致，商家同意后可全额退款。如遇特殊情况，用户跟商家协商一致，可酌情处理。需提前5天预约，因婚礼服务需预留档期，预定后取消将造成商家的经济损失。若要取消，申请退款时将扣除订单总金额的30作为违约金；若与商家协商一致，商家同意后可全额退款。如遇特殊情况，用户跟商家协商一致，可酌情处理。需提前5天预约，因婚礼服务需预留档期，预定后取消将造成商家的经济损失。若要取消，申请退款时将扣除订单总金额的30作为违约金；若与商家协商一致，商家同意后可全额退款。如遇特殊情况，用户跟商家协商一致，可酌情处理。</text>
				</div>
			</div>
		</section>
		<text class="btnConfirm">下单支付</text>
	</body>
	<script type="text/javascript" src="../js/swiper3.min.js"></script>

</html>